<template>
  <a-form-model
    v-if="data"
    ref="ruleForm"
    :model="checkForm"
    :rules="checkRules"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 11 }"
  >
    <a-alert
      v-if="[3, 4, 7, 8, 5, 2].includes(parseInt(data.batch_status))"
      :message="data.fail_reason"
      banner
      style="margin-bottom:20px;"
    />

    <div class="title">资料设置</div>
    <a-form-model-item label="营业执照" prop="license_pic">
      <cyyUploadImg
        :disabled = "[2, 3, 5, 6].includes(parseInt(data.batch_status))"
        @uploadSuccess="e => (checkForm.license_pic = e.data)"
        @deleteImg="checkForm.license_pic = ''"
        :imgSrc="checkForm.license_pic"
      >
      </cyyUploadImg>
    </a-form-model-item>
    <a-form-model-item label="营业执照编号" prop="license_no">
      <a-input :disabled = "[2, 3, 5, 6].includes(parseInt(data.batch_status))" placeholder="请输入营业执照编号" v-model="checkForm.license_no" />
    </a-form-model-item>
    <a-form-model-item label="支付宝账户" prop="alipay_account">
      <a-input :disabled = "[2, 3, 5, 6].includes(parseInt(data.batch_status))" placeholder="请输入支付宝账户" v-model="checkForm.alipay_account" />
    </a-form-model-item>
    <a-form-model-item label="商家名称" prop="contact_name">
      <a-input :disabled = "[2, 3, 5, 6].includes(parseInt(data.batch_status))" placeholder="请输入商家名称" v-model="checkForm.contact_name" />
    </a-form-model-item>

    <a-form-model-item label="联系电话" prop="service_phone">
      <a-input :disabled = "[2, 3, 5, 6].includes(parseInt(data.batch_status))" placeholder="请输入联系电话" v-model="checkForm.service_phone" />
    </a-form-model-item>
    <a-form-model-item label="邮箱地址" prop="service_email">
      <a-input :disabled = "[2, 3, 5, 6].includes(parseInt(data.batch_status))"  v-model="checkForm.service_email" placeholder="请输入邮箱地址" />
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button
        v-if="[0, 1, 4, 7, 8].includes(parseInt(data.batch_status))"
        v-loading="isLoading"
        class="btn"
        type="primary"
        @click="faceBind(checkForm.id)"
      >提交审核</a-button
      >
      <a-button class="btn" @click="$router.go(-1)"> 返回 </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import { getMerchantSign, merchantPay } from '@/api/setting/applet'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    cyyUploadImg
  },

  watch: {
    // data: {
    //   handler(newVal) {
    //     if (newVal) {
    //       this.getData(newVal)
    //     }
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  props:{
    id: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  created() {
    this.getData()
  },

  data() {
    return {
      isLoading: false,
      disabled: true,
      data: null,
      // 提交审核的小程序表单
      checkForm: {
        id: '',
        license_pic: '',
        alipay_account: '',
        contact_name: '',
        service_phone: '',
        service_email: ''
      },

      // 提交审核验证规则
      checkRules: {
        license_pic: [{ required: true, message: '请上传小程序logo' }],
        alipay_account: [{ required: true, message: '请输入支付宝账户', trigger: 'blur' }],
        contact_name: [{ required: true, message: '请输入商家名称', trigger: 'blur' }],
        service_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        service_email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }]
      }
    }
  },

  methods: {
    async faceBind(e) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.isLoading = true
          const hide = this.$message.loading('加载中', 0)
          let params = {
            id: e,
            params_data: {
              id: this.id,
              alipay_account: this.checkForm.alipay_account,
              contact_name:  this.checkForm.contact_name,
              service_phone:  this.checkForm.service_phone,
              service_email:  this.checkForm.service_email,
              license_pic: this.checkForm.license_pic,
              license_no: this.checkForm.license_no
            }
          }
          const res = await merchantPay(params)
          this.isLoading = false
          if (res.code == 0) {
            this.$message.success('签约成功')
            this.getData()
            this.$emit('changeData')
          } else {
            this.$message.error(res.msg)
          }
          hide()
        } else {
          return false
        }
      })
    },

    async getData() {
      const res = await getMerchantSign({id: this.id})
      console.log('res', res);
      let data = null;
      if (res.code === 0) {
        data = res.data;
      }
      let {license_no, license_pic, alipay_account, contact_name, service_phone, service_email } = data
      this.data = data
      let id = this.id;
      this.checkForm = {
        id,
        license_pic,
        license_no,
        alipay_account,
        contact_name,
        service_phone,
        service_email
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
}

.btn {
  margin: 0 5px;
}

.tip {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: normal;
}

.hr {
  margin-bottom: 24px;
  height: 1px;
  background: #e8e8e8;
}
</style>
